<script>
import { show, save, verification, record } from "@/http/api";
import { showSuccessToast, showToast } from "vant";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { getTimeOut, load },
  name: "",
  data() {
    return {
      coupeId: "",
      isRule: false,
      showTimeOut: false,
      showCont: false,
      showDate: false,
      showCar: false,
      centerInfo: {},
      loadMoreText: "数据加载中～",
      startDate: "",
      endDate: "",
      userArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
      showMask: false,
      carInfo: {},
      passwordValue: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    czTime() {
      this.endDate = "";
      this.startDate = "";
      this.page = 1;
      this.last_page = 0;
      this.userArr = [];
      this.$refs.calend.reset();
      this.getData();
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    onConfirm(values) {
      const [start, end] = values;
      this.startDate = this.getTime(values[0]);
      this.endDate = this.getTime(values[1]);
      this.showDate = false;
      this.userArr = [];
      this.page = 1;
      this.last_page = 0;
      this.getData();
    },
    getData() {
      let time = "";
      if (this.startDate != "" && this.endDate != "") {
        time = this.startDate + "," + this.endDate;
      }
      let data = {
        page: this.page,
        per_page: this.per_page,
        search: time,
      };
      record(data)
        .then((res) => {
          this.showCont = true;
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.userArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
            if (this.page == this.last_page) {
              this.loadMoreText = "到底啦～";
            } else {
              this.loadMoreText = "数据加载中~";
            }
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/record") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
    saveFn() {
      let data = {
        id: this.coupeId,
      };
      save(data).then((res) => {
        if (res.data.code == 1) {
          showSuccessToast("核销成功");
          this.userArr = [];
          this.page = 1;
          this.last_page = 0;
          this.getData();
          this.getCenter();
        } else {
          showToast(res.data.msg);
        }
        this.showCar = false;
      });
    },
    getCarInfo() {
      let data = {
        id: this.coupeId,
      };
      show(data).then((res) => {
        if (res.data.code == 1) {
          this.showCar = true;
          this.carInfo = res.data.data;
        }
      });
    },
    getCenter() {
      verification()
        .then((res) => {
          if (res.data.code == 1) {
            this.centerInfo = res.data.data;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    successFn() {
      this.coupeId = this.$route.query.id;
      if (this.coupeId) {
        this.getCarInfo();
      }
      this.getCenter();
      this.getData();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    if (!localStorage.getItem("passwrd")) {
      let passwrd = prompt("请输入管理员密码");
      if (passwrd == "666888") {
        localStorage.setItem("passwrd", passwrd);
        this.successFn();
      } else {
        this.isRule = true;
        alert("暂无权限");
      }
    } else {
      this.successFn();
    }
  },
};
</script>
<template>
  <div class="container">
    <div v-if="!showTimeOut && showCont">
      <div class="carCont">
        <div class="carItem">
          <div class="carName">今日核销</div>
          <div class="carText">{{ centerInfo.today_hx }}</div>
        </div>
        <div class="carItem">
          <div class="carName">本月核销</div>
          <div class="carText">{{ centerInfo.month_hx }}</div>
        </div>
        <div class="carItem">
          <div class="carName">总计核销</div>
          <div class="carText">{{ centerInfo.total_hx }}</div>
        </div>
      </div>
      <div class="codeUserCont">
        <div class="codeUserTitle">
          <div>接单记录</div>
          <div class="timeBtn">
            <span v-if="startDate && endDate">
              <span @click="showDate = true"
                >{{ startDate }}～{{ endDate }}</span
              >
              <span style="color: #1989fa" @click="czTime">重置日期</span>
            </span>
            <span v-else
              >订单日期:<span @click="showDate = true" style="color: #1989fa"
                >未选择</span
              ></span
            >
          </div>
        </div>
        <div class="codeUserList">
          <div
            class="codeUserItem"
            :key="index"
            v-for="(item, index) in userArr"
          >
            <div class="topCont">
              <img :src="item.head_img" />
              <div class="userInfo">
                <div class="userName">
                  {{ item.real_name }} ({{ item.mobile }})
                </div>
                <div class="userTime">
                  <div>核销时间：{{ item.use_time }}</div>
                  <div class="money">
                    {{ item.type == 1 ? "10元代金券" : "寿星免单券" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="nodataTip" v-if="userArr.length == 0">
            没有核销记录哦～
          </div>
          <div class="nodataTip" v-if="userArr.length > 0">
            {{ loadMoreText }}
          </div>
        </div>
      </div>
      <van-popup
        :close-on-click-overlay="false"
        v-model:show="showCar"
        round
        position="bottom"
      >
        <div class="maskCont">
          <div class="maskHead">代金券核销码</div>
          <div class="carInfo">
            <div class="carItem">
              <div class="carName">核销项目</div>
              <div class="carText">
                {{ carInfo.type == 1 ? "10元代金券" : "寿星免单券" }}
              </div>
            </div>
            <div class="carItem">
              <div class="carName">核销客户</div>
              <div class="carText">{{ carInfo.real_name }}</div>
            </div>
            <div class="carItem">
              <div class="carName">联系电话</div>
              <div class="carText">{{ carInfo.mobile }}</div>
            </div>
          </div>
          <div class="maskBtn" @click="saveFn">确认核销</div>
        </div>
      </van-popup>
    </div>
    <load v-if="!showCont && !isRule"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <van-calendar
      ref="calend"
      v-model:show="showDate"
      type="range"
      @confirm="onConfirm"
    />
    <van-popup v-model:show="showPassword" position="bottom" round>
      <div class="maskCont">
        <div class="maskHead">管理员密码</div>
        <div class="formInput">
          <input
            class="inputText"
            v-model="passwordValue"
            maxlength="30"
            placeholder="请输入管理员密码"
          />
        </div>
        <div class="maskBtn" @click="saveFn">登录系统</div>
      </div>
    </van-popup>
  </div>
</template>
<style scoped lang="less">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-top: 0.75rem;
  box-sizing: border-box;
}
.carCont {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 0.75rem;
  .carItem {
    width: 30%;
    // background-color: #1989fa;
    // color: white;
    text-align: center;
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    .carText {
      margin-top: 0.25rem;
      font-size: 1rem;
      // font-weight: bold;
    }
  }
}
.codeUserCont {
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  .codeUserTitle {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .timeBtn {
      font-weight: normal;
      font-size: 0.65rem;
    }
  }
  .codeUserList {
    .codeUserItem {
      width: 100%;
      padding: 0.5rem 0 0.75rem;
      border-bottom: 1px solid #ebebeb;
      .topCont {
        display: flex;
        padding: 0.5rem 0;
        align-items: center;
        img {
          margin-right: 0.75rem;
          width: 3rem;
          border-radius: 50%;
        }
        .userInfo {
          width: 2.5rem;
          flex: 1;
          .userName {
            font-size: 0.7rem;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            .desTag {
              padding: 0.1rem 0.5rem;
              background-color: #1989fa;
              font-size: 0.6rem;
              color: #fff;
              border-radius: 0.1rem;
              font-weight: normal;
            }
            .pinkTag {
              color: #fff;
              background-color: #f56c6c;
            }
            .greenTag {
              background-color: #85ce61;
            }
            .blacktag {
              color: #666;
              background-color: #ebebeb;
            }
          }
          .priceCont {
            align-items: center;
            display: flex;
            font-size: 0.6rem;
            color: #666;
            margin-top: 0.3rem;
            .priceSub {
              margin-left: 0.75rem;
            }
          }
          .userTime {
            font-size: 0.6rem;
            margin-top: 0.25rem;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .money {
              color: #f56c6c;
              color: rgb(63, 85, 204);
            }
          }
        }
      }
      .underCont {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0.5rem;
        .orderBtn {
          padding: 0.35rem 1.8rem;
          border: 1px solid #1989fa;
          color: #1989fa;
          font-size: 0.6rem;
          margin-left: 0.5rem;
          border-radius: 0.25rem;
        }
        .sureBtn {
          background-color: #1989fa;
          color: white;
        }
      }
      .remarkVal {
        color: #666;
        font-size: 0.6rem;
        margin-top: 0.5rem;
      }
      .flexText {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .telText {
          color: #1989fa;
          text-decoration: underline;
        }
      }
    }
    .nodataTip {
      color: #666;
      font-size: 0.6rem;
      text-align: center;
      margin-top: 20px;
    }
  }
}
.maskCont {
  padding: 0.75rem;
  box-sizing: border-box;
  padding-bottom: 1.25rem;
  .maskHead {
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
  }
  .carInfo {
    width: 90%;
    margin: 0 auto;
    margin-top: 0.75rem;
    .carItem {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.35rem;
    }
  }
  .maskBtn {
    text-align: center;
    padding: 0.6rem 0;
    background-image: linear-gradient(
      to right bottom,
      #ce5a34,
      rgb(254, 210, 196)
    );
    color: #fff;
    border-radius: 2rem;
    margin-top: 1.5rem;
  }
}
</style>
